<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="bw">bw1</div>
    <div class="bw">bw2</div>
    <div id="bw3">
        <ol>
            <li>111</li>
            <li>222</li>
        </ol>
    </div>

    <script>
        /* 
            需求：获取class='bw'的元素

            querySelector：返回一个对象
            querySelectorAll：返回一个集合
         */    
         const divObj = document.querySelector('.bw')   //找到第一个class=’bw‘的元素返回
        //  console.log(divObj)    //返回的是第一个
         /* 
            这里返回的 divObj是一个对象，应该有很多属性
            怎么样看到返回对象的属性？

            console.log(obj):每个对象以字符串的形式显示到控制台
                             这个显示对象本身

            console.dir(obj):在控制台显示指定 Javascript 对象的属性
                             这个显示对象的所有属性
          */
        //  console.dir(divObj)
        //  console.log(divObj.innerText)
        //  console.log(divObj.tagName)

         //获取id=bw3的div
        //  const div3Obj = document.querySelector("#bw3")
        //  console.log(div3Obj)
        //  const li1Obj = div3Obj.querySelector("li")
        //  console.log(li1Obj)        //获取第一个li

         const divs = document.querySelectorAll(".bw")
         console.log(divs)          //NodeList(2) [div.bw, div.bw]
         const lis = document.querySelectorAll("li")
         console.log(lis)           //NodeList(2) [li, li]


    </script>
</body>
</html>